<!-- 页面 -->
<template>
  <pc-nav></pc-nav>
	<view class="container tiku-list-wrapper  mt-3 mb-3 p-md-2">
		<s-layout navbar="none">
				<view>
					<s-tiku-category
						:isTk="true"
						@update:selected="handleCategoryChange"
					/>
				</view>
				<view class="tiku-card-list">
					<view class="tiku-card-box ss-r-10 ss-m-t-10" v-for="item in state.tikuList" :key="item.id">
						<view class="ss-order-card-warp ss-flex ss-col-stretch" style="cursor: pointer" @tap="onOpenTiku(item)">
							<view class="img-box ss-m-r-24">
								<image class="order-img" src="/static/images/zjxt.png" mode="widthFix" width="25"></image>
							</view>
							<view class="box-right ss-flex-col ss-row-between">
								<view class="title-text ss-line-2">{{ item.title }}</view>
								<view class="buycontent">
									<view class="price-unit">
										<span style="font-size:14px">￥</span>
										<span style="font-size:16px">{{ item.price[0] }}</span>
									</view>
									<slot name="cart">
										<view class="buy-box ss-flex ss-col-center ss-row-center" @tap="e => { e.stopPropagation(); onBuy(item) }">去购买</view>
									</slot>
								</view>
							</view>
						</view>
					</view>
				</view>
		</s-layout>
		<view class="right-box">
			<view class="vbar">关注微信公众号</view>
			<image class="wechat-qrcode" src="/static/images/wechat_qrcode.jpg" mode="widthFix" width="25"></image>
			<view class="text-center">扫码关注</view>
			<view class="text-center">"计划社微课程"微信公众号</view>
			<view style="height: 15px"></view>
			<s-goods-recommend />
		</view>
	</view>
  <div class="container-fluid">
    <pc-footer></pc-footer>
  </div>
</template>

<script setup>
	import {
		reactive,
		onMounted,
		ref
	} from 'vue';
	import {
		onLoad,
	} from '@dcloudio/uni-app';
	import sheep from '@/sheep';
	import _ from 'lodash';
  import PcNav from '@/sheep/components/pc-nav/pc-nav.vue';
  import PcFooter from '@/sheep/components/pc-footer/pc-footer.vue';

	const handleCategoryChange = (v) => {
		state.category1 = v.category1;
		state.category2 = v.category2;
		state.tiku_type = v.tikutype;
		getTikuList();
	}

	// 数据
	const state = reactive({
		category1: undefined,
		category2: undefined,
		tiku_type: undefined,
		tikuList: [],
		loadStatus: '',
		select_category_id: '',
		select_year: '',
		dropdownMenuList: [{
				title: '全部科目',
				type: 'picker',
				prop: 'god5',
				showAll: true,
				showIcon: true,
				field: {
					label: 'name',
					value: 'id',
					children: 'children',
				}
			},
			{
				title: '全部年份',
				type: 'cell',
				prop: 'god6',
				showAll: true,
				showIcon: true,
				syncDataFn: GetYearOptions
			}
		]
	})
	const daDropdownRef = ref()

	async function initData() {
	  // 添加加载效果
	  daDropdownRef.value?.setMenuLoading('god5', true)
	  const res = await sheep.$api.tiku.getcategorys({});
	  // 通过方法更新异步数据
	  daDropdownRef.value?.updateMenu('god5', res.data, 'options')
	
	  // 移除加载效果
	  setTimeout(() => {
	    daDropdownRef.value?.setMenuLoading('god5', false)
	  }, 1000)
	}
	
	async function GetYearOptions() {
		const now = new Date();
		const currentYear = now.getFullYear();
		const lastYear = currentYear - 1;
		const nextYear = currentYear + 1;

		const options = [{
				label: lastYear.toString()+"年",
				value: lastYear.toString()
			},
			{
				label: currentYear.toString()+"年",
				value: currentYear.toString()
			},
			{
				label: nextYear.toString()+"年",
				value: nextYear.toString()
			}
		];
		// 返回 JSON 字符串
		return options;
	}

	// 获取题库列表
	async function getTikuList() {
		state.loadStatus = 'loading';
		let res = await sheep.$api.tiku.lists({
			year: state.select_year,
			category1: state.category1,
			category2: state.category2,
			tiku_type: state.tiku_type,
		});
		state.error = res.error;
		if (res.code === 1) {
			state.tikuList = res.data;
		}
	}

	onMounted(() => {
	  initData()
	})
	

	onLoad(async (options) => {
		getTikuList();
	});

	// 立即购买
	function onBuy(e) {
		console.log(e);
		sheep.$api.goods.detail(e.id).then((res) => {
			console.log(res.data.sku_prices);
			sheep.$router.go('/pages/order/confirm', {
				data: JSON.stringify({
					order_type: 'goods',
					goods_list: [{
						goods_id: e.id,
						goods_num: 1,
						goods_sku_price_id: res.data.sku_prices[0].id
					}],
				}),
			});
		});
	}

	//打开题库详情
	function onOpenTiku(item) {
		sheep.$router.go('/pages/tiku/tkdetail', {
			id: item.content_id,
			goods_id: item.id
		})
	}
</script>

<style lang="scss" scoped>
	:deep(.page-app) {
		height: auto;
	}
	:deep(.page-main) {
		position: relative !important;
	}

	.buy-box {
		position: absolute;
		bottom: 0rpx;
		right: 20rpx;
		z-index: 2;
		width: 120rpx;
		height: 50rpx;
		background: linear-gradient(90deg, #fe8900, #ff5e00);
		border-radius: 25rpx;
		font-size: 24rpx;
		color: #ffffff;
	}

	.price-unit {
		display: flex;
		flex-direction: row;
		align-items: flex-end;
		line-height:1;
		margin-right: -4px;
		color: red;
	}

	.tiku-list-wrapper {
		display: flex;
		gap: 20px;
	}

	.tiku-card-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	:deep(.recommend-box) {
		// width: 280px;
		margin-top: 0;
	}
	:deep(.recommend-item-image) {
		width: 120px !important;
		height: 90px !important;
	}

	.tiku-card-box {
		width: calc(50% - 12px);
		margin-bottom: 20px;
		border: 1px solid #e5e5e5;
		border-radius: 4px;
		&:hover {
			transform: translateY(-4px);
			box-shadow: 0 0 4px #ddd;
		}
	}

	.ss-order-card-warp {
		padding: 20px 10px;

		.img-box {
			width: 184rpx;
			height: auto;
			border-radius: 10rpx;
			overflow: hidden;

			.order-img {
				width: 184rpx;
				height: auto;
			}
		}

		.box-right {
			flex: 1;
			position: relative;
		}

		.title-text {
			font-size: 28rpx;
			line-height: 40rpx;
		}
	}

	:deep(.uni-tooltip-popup) {
		background: var(--ui-BG);
	}

	.warning-color {
		color: #faad14;
	}

	.danger-color {
		color: #ff3000;
	}

	.success-color {
		color: #52c41a;
	}

	.info-color {
		color: #999999;
	}

	.right-box {
		border-left: 5px solid #f5f5f5;
	}

	.vbar {
		display: flex;
		align-items: center;
		font-size: 18px;
		font-weight: 600;
		padding: 10px;
		&::before {
			display: inline-block;
			content: '';
			height: 10px;
			width: 3px;
			border-radius: 2px;
			background: #ff6000;
			margin-right: 5px;
		}
	}
	.wechat-qrcode {
		display: block;
		width: 180px;
		height: 180px;
		margin: 20px auto;
	}
	.text-center {
		text-align: center;
		font-size: 14px;
	}
</style>
